<template>
  <div class="container">
    <header-view></header-view>
    <main>
      <stock-list @changeChoose="changeChoose"></stock-list>
      <div class="content">
        <klineView :id="stock.id"></klineView>
        <div class="list" style="height: 360px">
          <div class="list_header">
            <div
              class="list_nav"
              v-for="(item, index) in navList"
              :key="index"
              :class="current == index ? 'list_nav_active' : ''"
              @click="changeNav(index)"
            >
              {{ item.title }}
            </div>
          </div>
          <div class="list_form" v-if="current == 0 || current == 1">
            <div class="list_form_tb list_form_th">
              <div class="form_td form_first">{{ $t("单号") }}</div>
              <div class="form_td" style="width: 9%">{{ $t("交易品种") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("类型") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("交易量") }}</div>
              <div class="form_td" style="width: 12%">{{ $t("时间") }}</div>
              <div class="form_td" style="width: 9%">{{ $t("开仓价格") }}</div>
              <div class="form_td" style="width: 9%">S/L</div>
              <div class="form_td" style="width: 9%">T/P</div>
              <div class="form_td" style="width: 9%">{{ $t("当前价格") }}</div>
              <div class="form_td" style="width: 9%">{{ $t("库存费") }}</div>
              <div class="form_td" style="width: 9%">{{ $t("盈利") }}</div>
              <!-- <div class="form_td" style="width: 28px" v-if="current == 1"></div> -->
            </div>
            <div class="list_form_tb form_content scroll_box">
              <div class="form_row" v-for="(item, index) in orderList" :key="index">
                <!--   @click="openRow(item)" -->
                <div class="form_td form_first">{{ item.order_sn }}</div>
                <div class="form_td" style="width: 9%">{{ item.pro_name }}</div>
                <div class="form_td" style="width: 7%">{{ item.type_str }}</div>
                <div class="form_td" style="width: 7%">{{ item.num }}</div>
                <div class="form_td" style="width: 12%">{{ item.createtime }}</div>
                <div class="form_td" style="width: 9%">{{ item.price }}</div>
                <div class="form_td" style="width: 9%">{{ item.s_l }}</div>
                <div class="form_td" style="width: 9%">{{ item.t_p }}</div>
                <div class="form_td" style="width: 9%">{{ item.saleprice }}</div>
                <div class="form_td" style="width: 9%">{{ item.warehouse_price }}</div>
                <div class="form_td" style="width: 9%">{{ item.money }}</div>
                <!-- <div class="form_td" style="width: 28px; cursor: pointer">
                  <el-icon><CircleCloseFilled /></el-icon>
                </div> -->
              </div>
            </div>
            <div class="form_bottom">
              <div>
                <span class="form_bottom_item"
                  >{{ $t("余额") }}：<span>{{ status.member_price }}</span></span
                >
                <span class="form_bottom_item"
                  >{{ $t("净值") }}：<span>{{
                    Number(status.member_price) + Number(status.yingkui)
                  }}</span></span
                >
              </div>
              <span class="form_bottom_item">{{ status.yingkui }}</span>
            </div>
          </div>
          <div class="list_form" v-else>
            <div class="opt_box">
              <div class="search_box">
                <el-input v-model="keyword" :placeholder="$t('请输入订单号')" clearable>
                  <template #prefix>
                    <el-icon class="el-input__icon"><search /></el-icon>
                  </template>
                </el-input>
              </div>
              <div class="time_box">
                <div class="time_title">{{ $t("时间") }}：</div>
                <div class="time">
                  <el-date-picker
                    v-model="time"
                    type="daterange"
                    range-separator="|"
                    :start-placeholder="$t('开始时间')"
                    :end-placeholder="$t('结束时间')"
                  />
                </div>
              </div>
              <el-button class="search_btn" @click="toSearch">Search</el-button>
            </div>
            <div class="list_form_tb list_form_th">
              <div class="form_td form_first">{{ $t("成交") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("订单号") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("交易品种") }}</div>
              <div class="form_td" style="width: 12%">{{ $t("开仓时间") }}</div>
              <div class="form_td" style="width: 12%">{{ $t("平仓时间") }}</div>
              <div class="form_td" style="width: 6%">{{ $t("类型") }}</div>
              <div class="form_td" style="width: 6%">{{ $t("交易量") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("开仓价格") }}</div>
              <div class="form_td" style="width: 7%">S/L</div>
              <div class="form_td" style="width: 7%">T/P</div>
              <div class="form_td" style="width: 7%">{{ $t("平仓价格") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("手续费") }}</div>
              <div class="form_td" style="width: 7%">{{ $t("库存费") }}</div>
              <div class="form_td" style="width: 10%">{{ $t("盈利") }}</div>
            </div>
            <div class="list_form_tb form_content scroll_box">
              <div class="form_row" v-for="(item, index) in orderList" :key="index">
                <div class="form_td form_first">{{ item.status_str }}</div>
                <div class="form_td" style="width: 7%">{{ item.order_sn }}</div>
                <div class="form_td" style="width: 7%">{{ item.pro_name }}</div>
                <div class="form_td" style="width: 12%">{{ item.createtime }}</div>
                <div class="form_td" style="width: 12%">{{ item.sale_time }}</div>
                <div class="form_td" style="width: 6%">{{ item.type_str }}</div>
                <div class="form_td" style="width: 6%">{{ item.num }}</div>
                <div class="form_td" style="width: 7%">{{ item.price }}</div>
                <div class="form_td" style="width: 7%">{{ item.s_l }}</div>
                <div class="form_td" style="width: 7%">{{ item.t_p }}</div>
                <div class="form_td" style="width: 7%">{{ item.saleprice }}</div>
                <div class="form_td" style="width: 7%">{{ item.commission }}</div>
                <div class="form_td" style="width: 7%">{{ item.warehouse_price }}</div>
                <div class="form_td" style="width: 10%">{{ item.money }}</div>
              </div>
            </div>
            <div class="form_bottom">
              <div>
                <span class="form_bottom_item"
                  >{{ $t("盈利") }}：<span>${{ allMoney }}</span></span
                >
                <span class="form_bottom_item"
                  >{{ $t("入金") }}：<span>${{ userInfo.recharge_money }}</span></span
                >
                <span class="form_bottom_item"
                  >{{ $t("出金") }}：<span>${{ userInfo.withdraw_money }}</span></span
                >
                <span class="form_bottom_item"
                  >{{ $t("结余") }}：<span>${{ userInfo.price }}</span></span
                >
              </div>
              <div>
                <span class="form_bottom_item">{{ commission }}</span>
                <span class="form_bottom_item">{{ allMoney }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <stock-detail :id="stock.id"></stock-detail>
    </main>
    <!-- <el-dialog
      v-model="dialogVisible"
      width="32.25rem"
      destroy-on-close
      title="订单：#1622252 buy limit 0.01 USOil 10.00"
      center
    >
      <div>
        <div class="item">
          <div class="item_title">价格</div>
          <div class="item_group">
            <div class="inner_step">
              <el-input-number
                v-model="price"
                precision="2"
                step="0.01"
                :min="0.01"
                :max="100000"
              />
            </div>
          </div>
        </div>
        <div class="item_box">
          <div class="item">
            <div class="item_title">止损价</div>
            <div class="item_group">
              <div class="inner_step">
                <el-input-number
                  v-model="downPrice"
                  precision="2"
                  step="0.01"
                  :min="0.01"
                  :max="100000"
                />
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item_title">获利价</div>
            <div class="item_group">
              <div class="inner_step">
                <el-input-number
                  v-model="upPrice"
                  precision="2"
                  step="0.01"
                  :min="0.01"
                  :max="100000"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button class="btn" @click="dialogVisible = false">修改</el-button>
          <el-button class="btn" type="primary" @click="dialogVisible = false">
            删除
          </el-button>
        </span>
      </template>
    </el-dialog> -->
  </div>
</template>

<script>
import headerView from "./components/header.vue";
import stockList from "./components/stockList.vue";
import stockDetail from "./components/stockDetail.vue";
import klineView from "@/components/klineView/index.vue";
import { orderListApi, yingkuiApi, UserInfoApi } from "@/api/index";
export default {
  components: {
    headerView,
    stockList,
    stockDetail,
    klineView,
  },
  data() {
    return {
      current: 0,
      keyword: "",
      time: [],
      dialogVisible: false,
      downPrice: null,
      upPrice: null,
      price: null,
      stock: {},
      orderList: [],
      timer: null,
      status: {},
      allMoney: 0,
      commission: 0,
      userInfo: {},
    };
  },
  computed: {
    navList() {
      return [
        { title: this.$t("当前交易"), id: 1 },
        { title: this.$t("挂单交易"), id: 0 },
        { title: this.$t("历史交易"), id: 2 },
      ];
    },
  },
  mounted() {
    this.getOrderList();
    this.timer = setInterval(() => {
      this.getOrderList();
    }, 20000);
    this.getUserInfo();
  },
  unmounted() {
    clearInterval(this.timer);
  },
  methods: {
    getUserInfo() {
      UserInfoApi({ token: localStorage.getItem("token") }).then((res) => {
        console.log(res.data);
        this.userInfo = res.data;
      });
    },
    changeNav(key) {
      if (this.current == key) return;
      this.current = key;
      clearInterval(this.timer);
      if (this.current == 0 || this.current == 1) {
        this.getOrderList();
        this.timer = setInterval(() => {
          this.getOrderList();
        }, 20000);
      } else {
        this.getOrderList();
      }
    },
    openRow(opt) {
      this.dialogVisible = true;
    },
    changeChoose(opt) {
      this.stock = opt;
      console.log(this.stock, "<<<<<<<<<<<<<<<<<<<<<<<<<<<");
    },
    getOrderList() {
      let data = {
        token: localStorage.getItem("token"),
        status: this.navList[this.current].id,
      };
      if (this.current == 2) {
        data.order_sn = this.keyword;
        data.starttime = this.time[0] ? this.getTime(this.time[0]) : "";
        data.endtime = this.time[1] ? this.getTime(this.time[1]) : "";
      }
      orderListApi(data).then((res) => {
        console.log(res.data.data);
        this.orderList = res.data.data;
        if (this.current == 2) {
          this.allMoney = res.data.all_money;
          this.commission = res.data.all_commission;
        }
      });
      if (this.current == 0 || this.current == 1) {
        let obj = {
          token: localStorage.getItem("token"),
          status: this.current == 0 ? 1 : 0,
        };
        yingkuiApi(obj).then((res) => {
          console.log(res.data);
          this.status = res.data;
        });
      }
    },
    toSearch() {
      // console.log(this.getTime(this.time[0]), this.time[1]);
      this.getOrderList();
    },
    getTime(time) {
      // 给定的日期字符串
      let dateString = time;

      // 将字符串解析为 Date 对象
      let dateObject = new Date(dateString);

      // 提取年、月和日
      let year = dateObject.getFullYear();
      let month = (dateObject.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始计数的，使用padStart确保两位数
      let day = dateObject.getDate().toString().padStart(2, "0");

      // 构建所需的格式
      return year + "-" + month + "-" + day;
    },
  },
  // watch: {
  //   keyword(newVal, oldVal) {
  //     if (this.current == 2) {
  //       this.getOrderList();
  //     }
  //   },
  // },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  background-color: #22252f;
  color: #eee;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  main {
    flex: 1;
    height: calc(100% - 67px);
    display: flex;
    margin-top: 5px;
    .content {
      flex: 1;
      height: 100%;
      // background: #282b37;
      margin: 0 5px;
      display: flex;
      flex-direction: column;
      .list {
        width: 100%;
        background: #282b37;
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
        .list_header {
          display: flex;
          align-items: center;
          padding-top: 1rem;
          border-bottom: 1px solid #22252f;
          .list_nav {
            margin: 0 10px;
            position: relative;
            padding: 0 0 14px 0;
            font-size: 15px;
            cursor: pointer;
            &::after {
              position: absolute;
              content: "";
              height: 3px;
              background-color: transparent;
              left: 0;
              right: 0;
              bottom: -1px;
              border-radius: 5px;
            }
          }
          .list_nav_active {
            color: #f7d8a7;
            &::after {
              background: #f7d8a7;
            }
          }
        }
        .list_form {
          flex: 1;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          .list_form_tb,
          .form_row {
            display: flex;
            width: 100%;
            cursor: default;
            .form_td {
              padding: 0.625rem 0.525rem;
              font-size: 12px;
              text-align: right;
              color: #838795;
            }
            .form_first {
              flex: 1;
              text-align: left;
            }
          }
          .form_row {
            border-bottom: 1px solid #22252f;
            &:hover {
              background: #33343d;
            }
            .form_td {
              color: #fff;
              word-break: break-all;
            }
          }
          .list_form_th {
            border-bottom: 1px solid #22252f;
            display: flex !important;
          }
          .list_form_tb {
            display: block;
          }
          .form_content {
            flex: 1;
            overflow: auto;
          }
          .opt_box {
            display: flex;
            align-items: center;
            padding: 10px 17px;
            .search_box {
              border-radius: 50px;
              background-color: #22252f;
              padding: 0px 12px;
            }
            .time_box {
              margin-left: 0.5rem;
              display: flex;
              align-items: center;
              border-radius: 50px;
              background-color: #22252f;
              padding: 0px 12px;
              .time_title {
              }
            }
            .search_btn {
              border: 1px solid #ddd;
              color: #ddd;
              border-radius: 50px;
              background-color: #272b37;
              line-height: 28px;
              padding: 0 12px;
              cursor: pointer;
              margin-left: 0.5rem;
            }
          }
        }
        .form_bottom {
          padding: 0.625rem 0.525rem;
          font-size: 12px;
          background-color: #22252f;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          .form_bottom_item {
            margin-right: 1rem;
          }
        }
      }
    }
  }
}
.el-date-editor,
.el-input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  box-shadow: none;
}
::v-deep .el-input__wrapper {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none !important;
  color: #fff;
  .el-input__inner {
    color: #fff;
  }
  .el-range-input {
    color: #fff;
  }
}
::v-deep .el-dialog {
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #3a3f50;
  // transform: translateY(-50%);
  .el-dialog__title {
    color: #fff;
    text-align: left;
  }
}
::v-deep .el-input-number {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background: transparent;
  box-shadow: none;
  border: none;
  .el-input-number__decrease,
  .el-input-number__increase {
    width: 46px;
    height: 46px;
    line-height: 46px;
    background: #303443;
    border: none;
  }
  .el-input {
    .el-input__wrapper {
      box-shadow: none;
      border: none;
      background: #303443;
      .el-input__inner {
        color: #fff;
      }
    }
  }
}
.item_box {
  display: flex;
  align-items: center;
  column-gap: 20px;
  padding-top: 1rem;
  .item {
    flex: 1;
  }
}
.item {
  color: #eee;
  padding-top: 0.25rem;
  .item_title {
    color: #cbd1e8;
  }
  .item_group {
    margin-top: 0.5rem;
    .inner_step {
      background-color: #303443;
      border-radius: 5px;
      line-height: 50px;
      padding: 0 5px;
    }
    .inner_beilv {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 0.5rem;
      .beilv_item {
        display: block;
        color: #a5a8b4;
        width: 50px;
        text-align: center;
        background-color: #303443;
        border-radius: 5px;
        line-height: 50px;
        padding: 0 5px;
        box-sizing: border-box;
        cursor: pointer;
        &:hover {
          color: #fff;
        }
      }
    }
  }
}
.dialog-footer {
  .btn {
    text-align: center;
    font-size: 16px;
    line-height: 50px;
    border-radius: 5px;
    width: 150px;
    height: 50px;
    background: linear-gradient(81deg, #f7d8a7 0%, #f4cc8c 100%);
    border: none;
    box-shadow: none;
    color: #22252f;
    &:hover {
      color: #22252f;
    }
  }
  .el-button--primary {
    background: linear-gradient(135deg, #ef2b2c 0%, #f86346 100%);
  }
}
</style>
